<!DOCTYPE html>
<html lang="en">

<head>
    <!-- 插槽作用 提高组件的扩展性 
        类似手机app上面的不同页面导航栏组件 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="hello">
        <!-- 中间不写内容默认就会显示solt标签里的的默认信息 -->
        <cpn></cpn>

        <!-- i元素替换掉两个插槽 -->
        <cpn><i>主页</i></cpn>
        
        <!-- 多个标签的话，span标签和a标签都会替换每一个插槽 -->
        <cpn>
            <span>商</span>
            <a href="#">城</a>
            <span>界</span>
            <span>面</span>
        </cpn>
      
    </div>
    <template id="cpn1">
        <div>
            <span style="margin-right: 100px">返回</span>
            <!-- solt里面放后续开发需要更变的内容 起到一个插槽的作用 -->
            <slot>
                <b>默认</b>
                <del>的内容</del>
            </slot>
            <slot> 默认的内容2</slot>
            <span style="margin-left: 100px;">个人中心</span>
          
        </div>
    </template>
    <script src="../../vue.js"></script>
    <script>
        const vue01 = new Vue({
            el: '#hello',
            components:{
                cpn:{
                    template:'#cpn1',
                }
            }
        })
    </script>
</body>

</html>